<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <th:block th:include="base::header"/>
    <style>
        .img{
            width: 90%;
            position: absolute;
            bottom: 6px;
            border: 1px greenyellow solid;
        }
        .block{
            width: 80px;
            height: 120px;
            float: left;
            padding: 10px;
            margin: 10px;
            /*border: 1px red solid;*/
            position: relative;
        }
        .card{
            border: 1px black solid;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form method="post" class="layui-form" lay-filter="form">
            <div class="layui-form-item" style="display: none">
                <label for="productId" class="layui-form-label">
                </label>
                <div class="layui-inline x-body layui-form">
                    <input type="text" id="productId" name="productId" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="productName" class="layui-form-label">产品名称
                </label>
                <div class="layui-inline x-body layui-form">
                    <input type="text" id="productName" name="productName" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="productType" class="layui-form-label">产品种类
                </label>
                <div class="layui-inline x-body layui-form">
                    <input type="text" id="productType" name="productType" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" >
                <label for="status" class="layui-form-label">产品状态
                </label>
                <div class="layui-inline x-body layui-form">
                    <select name="status" id="status">
                        <option value='1'>正常</option>
                        <option value='2'>停产</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" >
                <label for="image" class="layui-form-label">相关图片
                </label>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="image" onclick="toChange1()">上传图片</button>
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="card1" class="layui-form-label">
                </label>
                <div class="layui-row" id="card1">

                </div>
                <input id="file1" type="file"multiple="multiple" style="display: none" onchange="upload(this,'picture')"/>
            </div>
            <div class="layui-form-item">
                <input id="pictures" type="text" name="image" style="display: none">
            </div>

            <div class="layui-form-item" >
                <label for="requirement" class="layui-form-label">产品介绍
                </label>
                <div class="layui-inline">
                    <textarea id="requirement" name="note" lay-verify="requirement" style="display: none;"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label  class="layui-form-label"></label>
                <button class="layui-btn" lay-submit lay-filter="add">提交</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var basePath ='[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]';
    var productId=[[${id}]];
    var data=[];

    function loadPicture(data) {
        $.each(data,function(index, item) {
            var title=item.substring(item.lastIndexOf("/")+1);
            var div=$("<div class='block'></div>");
            var img=$("<img class='img'>").attr('src',basePath+item).attr('title',title).attr('alt',title);
            div.append(img);
            img.click(function () {
                selected(this)
            })
            $("#card1").append(div).attr('class','card');
        });
    }
    layui.use(
        ['form', 'layer','jquery','layedit','util','laydate'],
        function() {
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var layedit=layui.layedit;
            var util = layui.util;
            var laydate=layui.laydate;

            $.get(basePath+"/product/loadedit",{"id":productId},function(product){
                console.log(product);
                form.val("form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "productId": product.productId,
                    "productName": product.productName,
                    "productType": product.productType,
                    "image": product.image,
                    "note": product.note,
                    "status": product.status
                });
                var index=layedit.build('requirement',{
                    height: 400,
                    uploadImage: {url: 'img', type: 'post'}
                });//编辑器

                form.verify({
                    requirement: function (value) {
                        layedit.sync(index);
                    }
                });
            });

            $.get("getpicture",{'id':productId},function (res) {
                data=res;
                console.log(data);
                loadPicture(data);
                var str=data.join(",");
                $("#pictures").val(str);
            });

            //监听提交
            form.on('submit(add)',function(data) {
                /*var time=util.toDateString(new Date().getTime(), "yyyy-MM-dd HH:mm:ss");
                data.field.addTime=time;
                data.field.reviseTime=time;*/
                var time=new Date();

                console.log(data.field);
                //发异步，把数据提交给php
                $.post("edit",data.field,function(res){
                    if(res.code==200){
                        layer.alert("添加成功",{
                            icon:1,
                        },function(){
                            //关闭当前frame
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        });
                    }
                });
                //发异步，把数据提交给php
                return false;
            });
        });
    function upload(obj,type){

        if (type=='picture'){
            var path=basePath+"/order/uploadpic";
        }else {
            var path=basePath+"/order/uploadfile";
        }

        var files=$(obj).prop('files');
        if (files.length==0){
            alert('请选择文件');
            return;
        }else{
            var formData=new FormData();
            $.each(files,function (index,item) {
                formData.append('files',item,item.name);
            })
            console.log(formData.get('files'));
            $.ajax({
                url: path,
                type: "POST",
                data: formData,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                success(res) {
                    console.log(res);
                    alert(res.msg);
                    loadPicture(res.data);
                    $.each(res.data,function (index,item) {
                        data.push(item);
                    });
                    var str=data.join(",");
                    $("#pictures").val(str);
                }
            });
        }
    }
    function toChange1() {
        $("#file1").click();
    }

</script>
</body>
</html>
